<template>
	<view class="dramaBoxOut">
		<view class="dramaBox">
			<image v-show="isShowCloseBtn" @tap="closePopup" class="close-btn" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/zwyPopupClose.png"></image>
			<view class="userTitle">{{ userTitle }}</view>
			<image src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/popup_icon.png" class="top-icon-box"></image>
			<image src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/popup_follow_img.gif" mode="widthFix" class="poster"></image>
			<!-- <view style="font-size: 32rpx;margin-top: 10rpx;margin-bottom: 28rpx;" class="clamp">{{ title }}</view> -->
			
			<button
				@click="userLockClick"
				:plain="true"
				hover-class="none"
				class="sideBarItem btn-set"
				aria-role="button"
				open-type="openProfile" 
				:user="userLockId"
			>
				<view class="isBtn">{{userBtn}}</view>
			</button>
		</view>
	</view>
</template>

<script>

export default {
	components: {  },
	name: '',
	props: {
		title:{},
		userLockId:{},
		nowItem:{},
		isShowCloseBtn: {
			type: Boolean,
			default: false
		},
		followTTMess: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			userTitle:'关注企业号，下集更精彩',
			userDes:'关注服务号后您可继续看以下内容',
			userBtn:'立即关注'
		};
	},
	methods: {
		closePopup() {
			this.$emit('closePopup', true)
		},
		copyWatchword(val) {
			uni.setClipboardData({
				data: val,
				success: function() {}
			});
		},
		toUser(){
			this.copyWatchword('关注')
			this.$emit('followBtn', true)
			tt.openAwemeUserProfile({
				success: (res) => {
					console.log('success',res);
				},
				fail:res=>{
					console.log('err',res);
				}
			});
		},
		userLockClick(){
			this.toUser()
		}
	},
	onLoad() {
	},
	onReady() {
		console.log('onReady');
		this.$uma && this.$uma.trackEvent('Ume_ServiceNumber', {
			name: 'Ume_SN_pop_up_PV'
		});
	}
};
</script>

<style lang="scss" scoped>
	.btn-set {
		margin-top: 39rpx;
		width: 386rpx;
		border-radius: 43rpx;
		border: 0px solid #000000;
		color: white;
		padding: 0;
		box-shadow: rgba(0,0,0,0.1) 0 0 0 0px inset;
		&::after {
			border: none !important;
		}
	}
	.dramaBoxOut{
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		background-color: #00000070;
		z-index: 99999;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.userTitle{
		font-size: 38rpx;
		color: #3D270B;
		font-weight: bold;
		margin-bottom: 25rpx;
	}
	.userDes{
		font-size: 28rpx;
		color: #999999;
	}
	.poster{
		width: 426rpx;
		border-radius: 17rpx;
	}
	.isBtn{
		width: 386rpx;
		height: 80rpx;
		background: linear-gradient(340deg, #D283FF 0%, #7BB1FD 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 43rpx;
		color: #FFFFFF;
		font-size: 32rpx;
	}
	.dramaBox{
		display: flex;
		align-items: center;
		// justify-content: center;
		flex-direction: column;
		background-color: white;
		border-radius: 20rpx;
		width: 550rpx;
		// height: 584rpx;
		padding: 90rpx 0 60rpx;
		position: relative;
		// position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 55;
		.top-icon-box {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 146rpx;
			height: 146rpx;
		}

		.close-btn {
			position: absolute;
			top: 20rpx;
			right: 30rpx;
			width: 32rpx;
			height: 32rpx;
		}
	}
</style>
